<script setup  >
import pageDetail from './components/pageDetail.vue'
import myFooter from './components/myFooter.vue'
</script>
<template>
  <!-- <div>个人中心主页</div> -->
  <div class="center-home-page">
    <div class="page-top">
      <div class="home-avatar">
        <img src="../../../images/my-home-avatar.jpg" alt="">
      </div>
      <div class="page-top-list">
        <div class="page-top-list-detail">
          <a href="javascript:;"><i class="iconfont icon-huiyuanzhongxin"></i></a>
          <a href="javascript:;"><span>会员中心</span></a>
        </div>
        <div class="page-top-list-detail">
          <a href="javascript:;"><i class="iconfont icon-shezhi"></i></a>
          <a href="javascript:;"><span>安全设置</span></a>
        </div>
        <div class="page-top-list-detail">
          <a href="javascript:;"><i class="iconfont icon-dizhi"></i></a>
          <a href="javascript:;"><span>地址管理</span></a>
        </div>
      </div>
    </div>
    <div class="page-order">
      <div class="order-top">
        <h3>我的订单</h3>
        <a href="javascript:;" style="font-size: 16px;">查看全部 ></a>
      </div>

      <pageDetail>取消订单</pageDetail>
      <pageDetail>再次购买</pageDetail>

    </div>
    <myFooter>收藏的商品</myFooter>
    <myFooter>我的足迹</myFooter>


  </div>
</template>
<style scoped lang="less">
@import './icon/iconfont.css';

.center-home-page {
  width: 994px;
  // height: 500px;
  // background-color: rgb(117, 184, 184);
  background-color: #fff;

  .page-top {
    width: 100%;
    height: 132px;
    background-image: url(../../../images/my-home1.png);
    display: flex;
    justify-content: space-between;


    .home-avatar {
      width: 85px;
      height: 85px;

      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        margin: 20px 60px;
      }
    }

    .page-top-list {
      // background-color: blueviolet;
      width: 500px;
      display: flex;
      justify-content: space-around;

      .page-top-list-detail {
        // background-color: cadetblue;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        color: #fff;

        i {
          color: #fff;
          font-size: 34px;
          font-weight: 400;
        }

        a {
          color: #fff;
        }
      }

    }
  }

  .page-order {
    width: 100%;
    height: 390px;
    // background-color: rgb(102, 218, 179);
    background-color: #fff;



    .order-top {
      h3 {
        font-size: 22px;
        font-weight: normal;

      }

      display: flex;
      justify-content: space-between;
      padding: 25px;

    }

    // .box {
    //   margin: 0 auto;
    // }
  }

  .page-goods {
    width: 100%;
    height: 390px;
    // background-color: rgb(151, 191, 178);
  }

  // .page-footprint {
  //   width: 100%;
  //   height: 390px;
  //   background-color: rgb(22, 122, 91);
  // }
}
</style>
